<template>
    <div class="page-work-my-book">
         <el-tabs v-model="activeStatus">
            <el-tab-pane label="全部" name="ALL"></el-tab-pane>
            <el-tab-pane label="进行中" name="DOING"></el-tab-pane>
            <el-tab-pane label="已完成" name="FINISH"></el-tab-pane>
        </el-tabs>

        <ul class="book-list" v-if="hadLoad && tableData.list.length > 0">
            <li class="list-item" v-for="item in tableData.list" :key="item.orderId">
                <div class="hd">
                    {{item.createTime}}  <span class="number">订单编号：{{item.orderId}}</span>
                </div>
                <div class="bd">
                    <div class="avatar">
                        <img v-lazy="item.headimgurl" alt="">
                    </div>
                    <div class="name">
                        <p clsss="from">需求方 - {{item.nickName}}</p>
                        <p class="desc">复古、极客、艺术公寓</p>
                    </div>
                    <div class="price">￥{{item.earnestMoney}}</div>
                    <div class="status">
                        <el-tag size="mini" type="warning">{{item.orderState | filterOrderStatus}}</el-tag> <br>
                        <el-button type="text" @click="readDetail(item)">订单详情</el-button>
                    </div>
                    <div class="handle">
                        <el-button size="mini" type="primary" @click="readDetail(item)">处理订单</el-button>
                    </div>
                </div>
            </li>
        </ul>

        <div class="data-empty" v-if="hadLoad && tableData.list.length === 0">
            <h4>哇哦，你还没有预约申请哦~！</h4>
            <p>先去上传你的作品和完善你的设计顾问名单吧，<br>以便增加人气获得更多订单</p>
            <div class="btns">
                <el-button @click="$router.push({name: 'myAdviserAdd'})">完善顾问名单</el-button>
                <el-button type="primary" @click="$router.push({name: 'myPictureAdd'})">上传作品</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { bookList } from '../../api/book'
export default {
    name: 'myBook',
    data(){
        return{
            activeStatus: 'ALL',
            tableData: {
                list: []
            },
            hadLoad: false
        }
    },
    methods: {
        getDataList(){
            bookList({
                designerId: localStorage.designerId
            }).then(rsp => {
                if(rsp.code === 200){
                    this.tableData = rsp.data
                }
                this.hadLoad = true
            })
        },

        readDetail(item){
            localStorage.myBookDetail = JSON.stringify(item)
            this.$router.push({name: 'myBookDetail', params: {id: item.orderId}})
        }
    },
    created(){
        this.getDataList()
    }
}
</script>

<style lang="less">
.page-work-my-book{
    .el-tabs{
        .el-tabs__header{
            padding: 0;
        }
        .el-tabs__item{
            padding: 0 60px !important;
        }
    }
    .book-list{
        padding: 20px 50px;
        .list-item{
            margin-bottom: 50px;
            .hd{
                margin-bottom: 15px;
                padding-bottom: 15px;
                border-bottom: 1px solid #ddd;
                .number{
                    margin-left: 20px;
                    color: #999;
                }
            }
            .bd{
                display: flex;
                align-items: center;
                .avatar{
                    margin-right: 15px;
                    width: 60px;
                    height: 60px;
                    img{
                        display: block;
                        margin: 0 auto;
                    }
                }
                .name{
                    flex: 1;
                    line-height: 1.8;
                    .from{
                        color: red;
                        font-weight: bold;
                    }
                    .desc{
                        font-size: 85%;
                        color: #999;
                    }
                }
                .price{
                    font-weight: bold;
                    font-size: 120%;
                }
                .status{
                    padding: 0 30px;
                    line-height: 1.8;
                    &>a{
                        font-size: 12px;
                    }
                }
                .handle{

                }
            }
        }
    }
    .data-empty{
        padding: 50px;
        text-align: center;
        &>h4{
            margin: 20px 0;
            font-size: 15px;
            font-weight: bold;
        }
        &>p{
            font-size: 13px;
            color: #999;
            line-height: 1.7;
        }
        .btns{
            margin-top: 30px;
        }
    }
}
</style>
